<template>
    <div class="app-container">
        <div class="view-container">
            <el-row :gutter="10" class="mb8">
                <el-col :span="23">
                    销售退货报表详情
                </el-col>
                <el-col :span="1">
                    <el-popover placement="bottom" title="筛选列" trigger="click" width="40">            
                        <el-checkbox-group v-model="checkedColumns" size="mini">
                            <el-checkbox v-for="item in checkBoxGroup" :key="item" :label="item" :value="item"></el-checkbox>
                        </el-checkbox-group>
                        <div title="筛选列" class="filter-table-col" slot="reference">
                            <img src="@/assets/img/screening.png" width="25" />
                        </div>
                    </el-popover>
                </el-col>
            </el-row>
            <el-table :data="list" height="calc(100vh - 350px)" border :key="reload">
                <el-table-column label="序号" type="index" align="center" width="50">
                    <template slot-scope="scope">
                        <span>{{(queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1}}</span>
                    </template>
                </el-table-column>
                <el-table-column v-if="colData[0].isTrue" label="单据编码"  align="center" prop="code" width="150px" />
                <el-table-column v-if="colData[1].isTrue" label="退库日期" align="center" prop="returnDate" width="120px" />
                <el-table-column v-if="colData[2].isTrue" label="客户" align="center" prop="customerName" width="150px" />
                <el-table-column v-if="colData[3].isTrue" label="SKU编码" align="center" prop="specificationCode" width="150px">
                    <template slot-scope="scope">
                        <div v-for="(item, index) in scope.row.salesReturnInboundDetailList" :key="index">
                            {{ item.specificationCode }}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column v-if="colData[4].isTrue" label="SKU名称" align="center" prop="specificationName" width="150px">
                    <template slot-scope="scope">
                        <div v-for="(item, index) in scope.row.salesReturnInboundDetailList" :key="index">
                            {{ item.specificationName }}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column v-if="colData[5].isTrue" label="批次" align="center" prop="batchNumber" width="120px">
                    <template slot-scope="scope">
                        <div v-for="(item, index) in scope.row.salesReturnInboundDetailList" :key="index">
                            {{ item.batchNumber }}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column v-if="colData[6].isTrue" label="规格" align="center" prop="productSpace" width="150px">
                    <template slot-scope="scope">
                        <div v-for="(item, index) in scope.row.salesReturnInboundDetailList" :key="index">
                            {{ item.productSpace }}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column v-if="colData[7].isTrue" label="申退数量" align="center" prop="planNum">
                    <template slot-scope="scope">
                        <div v-for="(item, index) in scope.row.salesReturnInboundDetailList" :key="index">
                            {{ item.planNum }}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column v-if="colData[8].isTrue" label="实退数量" align="center" prop="realNum">
                    <template slot-scope="scope">
                        <div v-for="(item, index) in scope.row.salesReturnInboundDetailList" :key="index">
                            {{ item.realNum }}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column v-if="colData[9].isTrue" label="源销售退货订单" align="center" prop="salesReturnOrderCode" width="150px" />
                <el-table-column v-if="colData[10].isTrue" label="状态" align="center" prop="status">
                    <template slot-scope="scope">
                        <div v-if="scope.row.status == 0" style="color:#13C2C2">待入库</div>
                        <div v-if="scope.row.status == 1" style="color:#52C41A">已入库</div>
                    </template>
                </el-table-column>
                <el-table-column v-if="colData[11].isTrue" label="物流单号" align="center" prop="shipmentNumber" width="150px" />
                <el-table-column v-if="colData[12].isTrue" label="备注" align="center" prop="remark" />
            </el-table>
            <pagination
                v-show="total > 0"
                :total="total"
                :page.sync="queryParams.pageNum"
                :limit.sync="queryParams.pageSize"
                @pagination="getList"
            />
        </div>
    </div>
</template>

<script>
import { saleReturnReportDetail } from "@/api/system/report/report"

export default {
    name: "list",
    data() {
        return {
            // 总条数
            total: 0,
            // 列表数据
            list: [],
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                startTime: undefined,
                endTime: undefined,
                productName: undefined,
                customerName: undefined,
            },
            reload: '',
            // colData中列出表格中的每一列，默认都展示
            colData: [
                { title: "单据编码", isTrue: true },
                { title: "退库日期", isTrue: true },
                { title: "客户", isTrue: true },
                { title: "SKU编码", isTrue: true },
                { title: "SKU名称", isTrue: true },
                { title: "批次", isTrue: true },
                { title: "规格", isTrue: true },
                { title: "申退数量", isTrue: true },
                { title: "实退数量", isTrue: true },
                { title: "源销售退货订单", isTrue: true },
                { title: "状态", isTrue: true },
                { title: "物流单号", isTrue: true },
                { title: "备注", isTrue: true }
            ],
            // 当前选中的多选框，代表当前展示的列
            checkedColumns: ["单据编码", "退库日期", "客户", "SKU编码", "SKU名称", "批次", "规格", "申退数量", "实退数量", "源销售退货订单", "状态", "物流单号", "备注"],
            // 多选框的列表，列出表格的每一列
            checkBoxGroup: ["单据编码", "退库日期", "客户", "SKU编码", "SKU名称", "批次", "规格", "申退数量", "实退数量", "源销售退货订单", "状态", "物流单号", "备注"]    
        }
    },
    created() {
        if(this.$route.query.customerName){
            this.queryParams.customerName = this.$route.query.customerName
        }
        if(this.$route.query.productName){
            this.queryParams.productName = this.$route.query.productName
        }
        if(this.$route.query.startDate){
            this.queryParams.startTime = this.$route.query.startDate
            this.queryParams.endTime = this.$route.query.endDate
        }
        this.$router.push({ query: {} })
        this.getList()
    },
    watch: {
        checkedColumns(val) {
            let arr = this.checkBoxGroup.filter(i => !val.includes(i));
            this.colData.filter(i => {
                if (arr.indexOf(i.title) != -1) {
                    i.isTrue = false;
                } else {
                    i.isTrue = true;
                }
            });
            this.reload = Math.random()
        }
    },
    methods: {
        // 获取列表
        getList() {
            saleReturnReportDetail(this.addDateRange(this.queryParams)).then(res => {
                this.list = res.rows
                this.total = res.total
            })
        }
    }
}
</script>

<style scoped>
.filter-table-col .el-icon-c-scale-to-original{
  font-size: 20px;
  cursor: pointer;
}
</style>